<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
			  margin: 0;
			  padding: 0;
			}
			.box{
			  width: 800px;
			  height: 800px;
			  margin: 20px auto;
			  position: relative;
			  overflow: hidden;
			}
			.img_box{
			  height: 800px;
			  width: 2400px;
			  position: absolute;
			  -moz-transition: 0.5s;
			  -webkit-transition: 0.5s;
			}
			li{
				list-style-type:none;
			}
			img{
			  width: 800px;
			  height: 800px;
			  float: left;
			}
			.switch{
			  width: 200px;
			  height: 100px;
		/*	  position: absolute;*/
			}
			#left{
			 float: left;
			 font-size: 30px;
			 padding-left: 20%;
			}
			#right{
			 float: right;
			 font-size: 30px;
			 padding-right: 20%;
			}
			
		</style>
	</head>
	<body>
		<div style="background: beige;">
			<div class="box" id="box">
			    <div class="img_box" id="img_box">
                    <?php foreach ($imagelist as $k=>$v): ?>
                        <li><a href="<?=base_url("index.php/home/index?id={$v['id']}")?>" style="color: #000000;">
                                    <img src="<?=base_url("attachments")?><?=$v['img']?>">
                            </a>
                        </li>
                    <?php endforeach; ?>

                </div>
	  		</div>
	  		<div id="left" class="switch"><p>上一张</p></div>
			<div id="right" class="switch"><p>下一张</p></div>
	  	</div>
  		<script type="text/javascript">
				var box;
				var count=1;
				window.onload=function(){
				  box=document.getElementById("img_box");
				  infro_box=document.getElementById("infro_box");
				  var left=document.getElementById("left");
				  var right=document.getElementById("right");
				  left.addEventListener("click",_left);
				  right.addEventListener("click",_right);
				}
				function _right(){
				  var dis=0;
				  if(count<3){
				    dis=count*800;
				  }else{
				    dis=0;
				    count=0;
				  }
				  box.style.left="-"+dis+"px";
				  count+=1;
				}
				function _left(event){
				  var dis=0;
				  if(count>1){
				    dis=(2-count)*800;
				  }else{
				    dis=-3*800;
				    count=4;
				  }
				  box.style.left=dis+"px";

				  count-=1;
				}
  		</script>
	</body>
</html>
